<template>
	<view class="local-business">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y list" @scrolltolower="lower">
			<view class="more-header">
				<view class="more-header-orange">
					<view class="more-search">
						<u-search placeholder="请输入店铺" class="search-input" v-model="searchStr"
							@change="pageNum=1;GetGoodShopPage()" :show-action="false">
						</u-search>
					</view>
					<view class="more-menu">
						<!-- <u-tabs :list="menuList" @click="handleMenuClick"></u-tabs> -->
						<view class="more-tabs">
							<u-tabs :list="menuList" :is-scroll="true" active-color="#fff" bg-color="transparent"
								:active-item-style="{'font-size':'14px'}" inactive-color="#fff" :font-size="26"
								:bar-width="100" :current="currentIndex" @change="handleMenuClick">
							</u-tabs>
						</view>
						<view class="more-all" @click="handleAll">
							<u-icon name="arrow-down"></u-icon>
						</view>
					</view>
				</view>
				<view class="more-header-white">
					<view class="more-menu-item" v-for="(item,i) in menuList[currentIndex].children"
						@click="navigateToList(item)">
						<view class="menu-item-img">
							<image :src="item.image"></image>
						</view>
						<view class="menu-item-text">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="more-content">
				<view class="more-good-store">
					<view class="good-store-title">
						<view class="good-store-title-icon">

						</view>
						<view class="good-store-text">
							好店推荐
						</view>
					</view>
					<div class="good-store-list" v-if="goodStoreList===''">
						<u-loading mode="circle" size="28"></u-loading> 加载中……
					</div>
					<div class="good-store-list" v-else-if="!(goodStoreList&&goodStoreList.length>0)">
						暂无好店
					</div>
					<view class="good-store-list">
						<view class="good-store-list-item" v-for="(item,i) in goodStoreList" @click="toStore(item)">
							<view class="item-img">
								<image :src="item.storeLogo" color=""></image>
							</view>
							<view class="item-text">
								{{item.storeName}}
						</view>
							</view>
					</view>
				</view>
				<view class="more-content-list">
					<view class="content-list-category">
						<view class="category-item" :class="{active:activeIndex==3}" @click="handleCategoryChange(3)">
							<view class="category-item-img">
							</view>
							<view class="category-item-text">
								按距离
							</view>
						</view>
						<view class="category-item" :class="{active:activeIndex==1}" @click="handleCategoryChange(1)">
							<view class="category-item-img">
							</view>
							<view class="category-item-text">
								按销量
							</view>
						</view>
						<view class="category-item" :class="{active:activeIndex==2}" @click="handleCategoryChange(2)">
							<view class="category-item-img">
							</view>
							<view class="category-item-text">
								按评价
							</view>
						</view>
					</view>
					<view class="content-list">
						<view class="content-list-item" v-for="(item,i) in storeList"
							@click="navigateToDetailPage(item)">
							<view class="list-item-img">
								<image :src="item.storeLogo"></image>
							</view>
							<view class="list-item-content">
								<view class="list-item-top">
									<view class="item-content-title">
										{{item.storeName || ''}}
									</view>
									<view class="item-content-address">
										{{item.storeAddressPath}}{{ item.storeAddressDetail}}
									</view>
								</view>
								<view class="item-content-other">
									<view class="other-top">
										<view class="item-star">
											{{item.score || 0.0}}分
										</view>
										<view class="item-sale">
											月售 {{item.monthSales || 0}}+
										</view>
									</view>
									<view class="item-location">
										<u-icon name="map" color="#171717"></u-icon>
										<span>{{item.distance<1000 ? `${item.distance}m`: `${Number(item.distance/1000).toFixed(2)}km` }}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more class='base' :content-text="contentText" status="no-more">
					</uni-load-more>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getCategoryList
	} from "@/api/goods.js";
	import {
		GetGoodStore,
		GetGoodShopPage
	} from "@/api/home" //获取楼层装修接口
	export default {
		data() {
			return {
				contentText: {
					contentnomore: '我是有底线的~',
				},
				searchStr: '',
				currentIndex: 0,
				menuList: [],
				goodStoreList: [],
				storeList: [],
				activeIndex: 3,
				pageNum: 1,
				pageSize: 10,
				total: 0,
				scrollTop: 0,
			};
		},
		onLoad() {
			this.loadMenus()
			this.GetGoodStore()
			this.GetGoodShopPage()
		},
		onShow() {
			this.GetGoodShopPage()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1
			this.GetGoodShopPage();
		},
		methods: {
			//好店推荐 单个跳转
			toStore(item) {
				uni.navigateTo({
					url: `/pages/product/shopPage?id=${item.id}`,
				})
			},
			// 上拉到底部加载更多
			lower() {
				this.pageNum++
				this.GetGoodShopPage()
			},
			// 店铺详情
			navigateToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/shopPage?id=${item.id}`,
				})
			},
			// 本地好店
			GetGoodStore() {
				//本地好店
				GetGoodStore({
					pageSize: 10,
					pageNumber: 1,
					recommend: true,
				}).then((res) => {
					if (res.data && res.data.success) {
						this.goodStoreList = res.data.result
					} else {
						this.goodStoreList = []
					}
				})
			},
			navigateToList(item) {
				uni.navigateTo({
					url: `/pages/search/store?category=${item.id}&name=${item.name}`,
				});
			},
			GetGoodShopPage() {
				// 本地商圈
				GetGoodShopPage({
					pageSize: this.pageSize,
					pageNumber: this.pageNum,
					state: 1,
					type: this.activeIndex,
					storeName: this.searchStr
				}).then((res) => {
					if (res.data && res.data.success) {
						// 如果是第一页，清空数组，重新赋值
						if (this.pageNum === 1) {
							this.storeList = res.data.result.records
						} else { //其他为上拉加载更多，合并数组
							this.storeList = this.storeList.concat(res.data.result.records)
						}
						// 如果没有查询到数据，代表没数据了，pageNum-1
						if (res.data.result.records?.length <= 0) {
							this.pageNum--
						}
						this.total = res.data.result.total

					} else {
						this.storeList = []
					}
				})
			},

			handleCategoryChange(index) {
				this.activeIndex = index
				this.GetGoodShopPage()
			},
			// 菜单单击事件
			handleMenuClick(index) {
				this.currentIndex = index
			},
			// 跳转全部分类
			handleAll() {
				console.log(11111)
				uni.navigateTo({
					url: `/pages/search/category?one=0&two=0`,
				})
			},
			// 菜单加载
			async loadMenus() {
				let list = await getCategoryList(0);
				if (list.data.code == 200 && list.data && list.data.result && list.data.result.length > 0) {
					this.menuList = list.data.result[0].children
				}
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>

	.local-business {
		background: #EBECED;
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;

		.list {
			width: 100%;
			flex: 1 0 0;
			overflow-x: hidden;
			overflow-y: auto;
		}

		.more-header {
			.more-header-orange {
				background: #E84B08;

				.more-search {
					padding: 20rpx;
				}

				.more-menu {
					display: flex;
					justify-content: space-between;

					.more-all {
						width: 52rpx;
						height: 52rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 14rpx 20rpx;
						color: #fff;
						font-size: 36rpx;
					}

					.more-tabs {
						width: 80%;
						flex: 1;
					}
				}
			}

			.more-header-white {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				padding: 0 20rpx;
				background: #FFFFFF;

				.more-menu-item {
					width: 20%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					margin: 30rpx 0;

					.menu-item-img {
						width: 84rpx;
						height: 84rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.more-content {
			flex: 1;
			overflow-x: hidden;
			overflow-y: auto;

			.more-good-store {
				background: #FFFFFF;
				margin-top: 14rpx;

				.good-store-title {
					display: flex;
					padding: 20rpx;

					.good-store-title-icon {
						background-image: url(/static/img/more-location.png);
						width: 50rpx;
						height: 50rpx;
						margin-right: 6rpx;
					}

					.good-store-text {
						flex: 1;
						line-height: 50rpx;
						color: #242424;
						font-size: 26rpx;
						font-weight: 700;
					}
				}

				.good-store-list {
					display: flex;
					width: 100%;
					overflow-x: auto;
					overflow-y: hidden;
					flex-wrap: nowrap;
					padding: 20rpx;

					.good-store-list-item {
						width: 220rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						margin-right: 12rpx;

						.item-img {
							width: 220rpx;
							height: 220rpx;
							border-radius: 8rpx;
							overflow: hidden;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.item-text {
							color: #242424;
							font-size: 24rpx;
							font-weight: 400;

						}

					}
				}
			}

			.more-content-list {
				padding: 0 20rpx;

				.content-list-category {
					display: flex;
					justify-content: space-between;
					padding: 24rpx;

					.category-item {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.category-item-img {
							width: 30rpx;
							height: 30rpx;
							background: url(/static/img/sale.png) no-repeat;
							background-size: 100% 100%;
						}

						.category-item-text {
							color: #424040;
							font-size: 26rpx;
							font-weight: 400;
						}
					}

					.category-item.active {
						.category-item-img {
							background: url(/static/img/saleActive.png) no-repeat;
							background-size: 100% 100%;
						}

						.category-item-text {
							color: #E63214;
						}
					}

					.category-item:nth-child(2) {
						.category-item-img {
							background: url(../../../static/img/evaluate.png) no-repeat;
							background-size: 100% 100%;
						}
					}

					.category-item.active:nth-child(2) {
						.category-item-img {
							background: url(../../../static/img/evaluateActive.png) no-repeat;
							background-size: 100% 100%;
						}
					}

					.category-item:last-child {
						.category-item-img {
							background: url(../../../static/img/distance.png) no-repeat;
							background-size: 100% 100%;
						}
					}

					.category-item.active:last-child {
						.category-item-img {
							background: url(../../../static/img/distanceActive.png) no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.content-list {
					.content-list-item {
						height: 210rpx;
						background: #FFFFFF;
						border-radius: 24rpx;
						display: flex;
						justify-content: flex-start;
						padding: 16rpx;
						margin-bottom: 10rpx;

						.list-item-img {
							width: 190rpx;
							height: 190rpx;
							border-radius: 10rpx;
							margin-right: 40rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.list-item-content {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							flex: 1;

							.item-content-title {
								color: #242424;
								font-size: 28rpx;
								font-weight: 400;
								margin: 6rpx 0 20rpx 0;
							}

							.item-content-address {
								color: #ADAAAA;
								font-size: 20rpx;
								font-weight: 400;
							}

							.item-content-other {
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding-right: 5rpx;

								.other-top {
									display: flex;
									justify-content: flex-start;
									align-items: center;

									.item-star {
										color: #FF8921;
										font-size: 32rpx;
										font-weight: 400;
										margin-right: 40rpx;
									}

									.item-sale {
										color: #ADAAAA;
										font-size: 20rpx;
										font-weight: 400;

									}
								}

								.item-location {
									color: #171717;
									font-size: 20rpx;
									font-weight: 400;

								}

							}
						}
					}
				}
			}
		}
	}
</style>
